
<template>
    <div class="container">

        <PageHeader />

        <div class="box boxwidth">
            <!--分类-->
            <div class="category">
                <el-form label-position="right" label-width="80px" style="text-align:left;padding:10px;" >
                    <el-form-item label="品牌" >
                        <span>阿迪</span> <span>迪卡侬</span> <span>苹果</span>
                    </el-form-item>
                    <el-form-item label="规格" >
                        <span>1*1</span><span>2*2</span><span>3*3</span>
                    </el-form-item>
                    <el-form-item label="适应人群">
                        <span>儿童</span><span>女士</span><span>男士</span>
                    </el-form-item>
                </el-form>
            </div>

            <!--查询-->
            <div>
                <el-form :inline="true" :model="search" class="demo-form-inline">
                    <el-form-item label="商品名称">
                        <el-input v-model="search.name" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div>
                <el-button type="primary" @click="onSort1">按价格升序排</el-button>
                <el-button type="primary" @click="onSort2">按销量降序排</el-button>
                <el-button type="primary" @click="onSort3">复习排序按钮</el-button>

            </div>

            <el-row>
                <el-col :span="8" v-for="(o, index) in datalist" :key="index">
                    <el-card :body-style="{ padding: '0px' }" @click.native="goToDetail(o.id)">
                        <img :src="'http://localhost:5216/' + o.imgs[0].imgPath" class="image" style="height:100px;">
                        <div style="padding: 14px;">
                            <span>{{ o.name }}</span>
                            <div class="bottom clearfix">
                                <div class="time" style="color:red;">￥{{ o.price }}</div>
                                <el-button type="primary" size="mini" class="button" @click="addCar(o.id, o.price)">
                                    加入购物车
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="paged.pageIndex" :page-sizes="[1, 2, 5, 10, 15, 20]" :page-size="paged.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="paged.total">
            </el-pagination>
        </div>

        <PageFooter />

    </div>
</template>

<style scoped>
.el-form-item{
    margin-bottom: 0;
}

.category{
    margin: 20px 0;
}
.category span{
    border: 1px solid #dcdcdc;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 15px;
}
.el-form-item__label{
    background-color: #f3f3f3;
}
</style>

<script>
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'
export default {
    components: {
        PageHeader, PageFooter
    },
    data() {
        return {
            currentDate: new Date(),
            datalist: [],
            paged: {
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            search: {
                name: '',
                sortField: 'id',
                sortValue: 'asc'
            }
        };
    },
    mounted() {
        this.onLoadData()
    },
    methods: {

        goToDetail(id) {

            console.log(id)
            this.$router.push(
                {
                    path: '/goods/detail',
                    query: {
                        aaaaaaaaaaaaaaaaaid: id,
                        name: 'lcg'
                    }
                }
            )

            // this.$router.push(
            //     {
            //         name: 'goods/detail',
            //         params:{
            //             aaaaaaaaaaaaaaaaaid:id,
            //             name:'lcg'
            //         }
            //     }
            // )
        },

        addCar(id, price) {

            //一、用户信息(主要是用户id)
            let userid = ''
            //如果有缓存，就有缓存里拿，没有的话。测试的时候，可以模拟

            let userinfo = localStorage.getItem('ph5userinfo')
            //我在登录的时候，是把整个用户信息放进去。放进去的是json字符串,获取id的时候，需要将字符串转为json对象
            let user = JSON.parse(userinfo)  //将json字符串。转为json对象  ======>将json对象转为json字符串 JSON.stringify
            userid = user.id

            //let user="{id:'aaa',name:'sfafdas'}"  //json字符串
            //let info ={id:'aaa',name:'sfafdas'}  //json对象
            //console.log('user:'+user.name + '-----info =' + info.name)  //字符串不能直接点出它的属性字段


            //二、商品信息（商品id、商品的现在售价、准备购买的商品数量）
            let goodsId = id
            let goodsNumber = 1
            let goodsPrice = price


            //三、将用户id和购买的商品信息合到一个json对象中，方便传到后台
            let obj = {
                userid: userid,
                goodsId: goodsId,
                goodsNumber: goodsNumber,
                goodsPrice: goodsPrice
            }
            console.log(obj)

            //四、将我选中商品，调用后台api，加入购物车
            let url = 'http://localhost:5216/goods/car/add'
            this.$http.post(url, obj).then(res => {
                console.log(res)
            })
        },


        onLoadData() {
            let url = 'http://localhost:5216/goods/select?name=' + this.search.name + '&sortField=' + this.search.sortField + '&sortValue=' + this.search.sortValue + '&pageIndex=' + this.paged.pageIndex + '&pageSize=' + this.paged.pageSize

            url = 'http://localhost:5216/goods/select'
            this.$http.get(url,
                {
                    params: {
                        name: this.search.name,
                        sortField: this.search.sortField,
                        sortValue: this.search.sortValue,
                        pageIndex: this.paged.pageIndex,
                        pageSize: this.paged.pageSize
                    }
                }).then(res => {
                    this.datalist = res.data.data.q
                    this.paged.total = res.data.data.total
                })

            // this.$http.get(url,{params:{}}).then(res => {
            //     console.log(res)
            //     this.datalist = res.data.data.q
            //     this.paged.total = res.data.data.total
            // })
        },
        onSort1() {
            this.search.sortField = 'price'
            this.search.sortValue = 'asc'
            this.onLoadData()
        },
        onSort2() {
            this.search.sortField = 'sales'
            this.search.sortValue = 'desc'
            this.onLoadData()
        },
        onSort3() {
            let value = 'asc'
            let filed = 'price'
            let url = 'http://localhost:5216/goods/fxsort?value=' + value + '&field=' + filed + '&pi=1&ps=10'
            this.$http.get(url).then(res => {
                console.log(res)
            })
        },

        onSubmit() {
            this.onLoadData()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.paged.pageSize = val
            this.onLoadData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.paged.pageIndex = val
            this.onLoadData()
        }
    }
}
</script>